<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/classes/model/Kid.php');
require_once($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/classes/dao/Lov.php');

require_once($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/classes/dao/UkkepukDao.php');
require_once($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/classes/dao/CalendarDao.php');
$ukkepuk = new UkkepukDao();
$calendar = new CalendarDao();

?>

<html>
    <head>
        <script src="/ukkepuk/source/html/scripts/jquery-1.7.1.js"></script>
        <script src="/ukkepuk/source/html/scripts/topmenu.js"></script>
        <script charset="utf-8" src="/ukkepuk/source/html/scripts/kindeditor-min.js"></script>
		<script charset="utf-8" src="/ukkepuk/source/html/scripts/lang/en.js"></script>
        <script charset="utf-8" src="/ukkepuk/source/html/scripts/jquery.ptTimeSelect.js"></script>

        <script type="text/javascript">
            var selectedKid = -1;
            var editor;
            $(document).ready(function() {
                //init rich text editor
                
                KindEditor.ready(function(K) {
                        editor = K.create('#editor_note', {
                            langType : 'en'
                        });
                });
                
                //time selectors
                $('.time').ptTimeSelect();
                
                //if you clikc on an image thumb, load this kid
                $(".kidthumb").click(function(){
                    $(".portalKidInfo").css("display","block");
                    $(".portalMainInfo").css("display","none");
                    //read data
                    var selectedIndex = $(this).attr("id").substring(4);
                    $.ajax({
                        url: 'kid_actions.php',
                        type: "POST",
                        data: {kidId: selectedIndex, action: "readKidForCreche"},
                        dataType: "xml",
                        success: function(data) {
                            //$('.result').html(data);
                            //remove info of other kids
                            $("#diperstoday > ul > li").remove();
                            $("#sleeptoday > ul > li").remove();
                            $("#drinktoday > ul > li").remove();
                            $("#foodtoday > ul > li").remove();
							
							
                            //set info of kid
                            //set name
                            $("#firstname").html($(data).find("kid").attr("firstname"));
                            $("#name").html($(data).find("kid").attr("name"));
                            
                            $("#kiddate").html(formatDateKey($(data).find("kid").attr("date")));
                            selectedKid = $(data).find("kid").attr("id");
							
                            //set diaper info
                            $(data).find("diaper").each( function() {
                                $("<li>"+$(this).attr("time") + "</li>").appendTo("#diperstoday > ul");
                            });
							
                            //set sleep info
                            $(data).find("sleep").each( function() {
                                $("<li><span class=\"from\">"+$(this).attr("sleepFrom") + "</span> --&gt; <span class=\"to\">"+$(this).attr("sleepTo")+"</span></li>").appendTo("#sleeptoday > ul");
                            });
                                                        
                            //set drink info
                            $(data).find("drink").each( function() {
                                $("<li>"+$(this).attr("time") + "[" + $(this).attr("type") + " - " + $(this).attr("amount") + "cc] </li>").appendTo("#drinktoday > ul");
                            });
                                                        
                            //set food info
                            $(data).find("food").each( function() {
                                $("<li>" + $(this).attr("time") + "[" + $(this).attr("title") + " - " + $(this).attr("score") + "] </li>").appendTo("#foodtoday > ul");
                            });
							
                        }
                    });
                    
                    //set calendar
                    var datetoday = new Date();
                    loadCalendar(selectedIndex, datetoday.getYear()+1900, datetoday.getMonth()+1);
                    
                    //set next week calendar
                    loadCalendarNextWeek(selectedIndex);
                    
                    //set text editor content.
                    loadEditorNote(selectedIndex);
				
                });
                
                //if you click on an edit image, displayu the next line to add a line
                $("img.edit").click(function() {
                    $(this).parent().parent().next().find(".time").attr("value", getTime());
                    $(this).parent().parent().next().slideDown();
                });
                
                //click on calendar day
                $("#calendarKid .open").click(function (){
                    addTimeToCalendar(this);
                });
                
            });
            
            function formatDateKey(key){
                var year = key.substring(0, 4);
                var month = key.substring(4, 6);
                var day = key.substring(6, 8);
                            
                return day + "/" + month + "/" + year;
            }
            
            function loadEditorNote(selectedIndex) {
                $.ajax({
                    url: 'kid_actions.php',
                    type: "POST",
                    data: {kidId: selectedIndex, action: "readNoteForKids"},
                    dataType: "xml",
                    success: function(data) {
                        editor.html($(data).find("report").text());
                    }
                });
                    
                
            }
            function loadCalendarNextWeek(selectedIndex){
                $.ajax({
                    url: 'calendar_actions.php',
                    type: "POST",
                    data: {kidId: selectedIndex, numDays: 7, action: "readNextCalendarDaysForKid"},
                    dataType: "xml",
                    success: function(data) {
                         $("#weekcalendar .weekcalendar").remove();
                        var result = "<table class=\"weekcalendar\">";
                        result += "<tr><th>Volgende " + 7 + " dagen</th></tr>"
                        $(data).find("calendar").each( function() {
                            
                            var timeString = "-";
                            if( $(this).attr("registeredDay") == "yes")
                                timeString = $(this).attr("startTime") + " --> " + $(this).attr("endTime");
                            
                            result += "<tr><td>" + formatDateKey( $(this).attr("date")) + "</td><td>" + timeString + "</td></tr>";
                        });
                        result += "</table>";
                        $(result).appendTo("#weekcalendar");
                    }
                });
            }
            
            function loadCalendar(selectedIndex, yearToLoad, monthToLoad){
                $.ajax({
                    url: 'calendar_actions.php',
                    type: "POST",
                    data: {kidId: selectedIndex, year: yearToLoad, month: monthToLoad, action: "readCalendarForKid"},
                    dataType: "xml",
                    success: function(data) {
                        $("#calendarKid .monthcalendar").remove();

                        var result = "<table class=\"monthcalendar\">";
                        var prevCalYear = yearToLoad;
                        var prevCalMonth = monthToLoad - 1;
                        
                        var nextCalYear = yearToLoad;
                        var nextCalMonth = monthToLoad + 1;
                        if(monthToLoad == 1){
                            prevCalMonth = 12;
                            prevCalYear -= 1;
                        }else if (monthToLoad == 12) {
                            nextCalMonth = 1;
                            nextCalYear += 1;
                        }
                        result += "<tr><th><a href=\"javascript:loadCalendar("+selectedIndex+","+prevCalYear+","+prevCalMonth+")\">&lt;&lt;</a></th><th colspan=\"5\">"+$(data).find("calendarMonth").attr("monthLabel") + " " + $(data).find("calendarMonth").attr("year") +"</th><th><a href=\"javascript:loadCalendar("+selectedIndex+","+nextCalYear+","+nextCalMonth+")\">&gt;&gt;</a></th></tr>";
                        result += "<tr><th>Ma</th><th>Di</th><th>Wo</th><th>Do</th><th>Vr</th><th>Za</th><th>Zo</th></tr>";
                        result += "<tr>";

                        var index = 1;
                        $(data).find("calendarKids").each( function() {
                            var calDayClass = "open";
                            if($(this).attr("registeredDay") == "yes")
                                calDayClass = "registeredDay";
                            result += "<td id=\"c_"+ $(this).attr("date") +"\" class=\""+calDayClass + " " + $(this).attr("itemType") + "\">" + $(this).attr("date").substring(6) + "</td>";
                            if(index%7 == 0)
                                result += "</tr><tr>";
                            index++;
                        });
                        result += "</tr>";
                        result += "</table>";
                        $(result).appendTo("#calendarkid #calendar");
                        
                        //set default start and stop
                        $("#fromTime").attr("value", ($(data).find("calendarMonth").attr("defaultStart")));
                        $("#toTime").attr("value", ($(data).find("calendarMonth").attr("defaultEnd")));
                        
                        //loop again over xml to add hover
                        $(data).find("calendarKids").each( function() {
                            if($(this).attr("registeredDay") == "yes"){
                                $("#c_" + $(this).attr("date")).bind("mouseover", {me:$(this)}, 
                                    function (event) { 
                                        var selectedDay = event.data.me.attr("date").substring(6);
                                        $("#selectedTime").html("op " +selectedDay + ": <br/> " +event.data.me.attr("startTime") + " -> " + event.data.me.attr("endTime"));
                                    });

                            }
                        });

                        //registere event listener to open days of this month
                        $("#calendarKid .open.this").click(function (){
                             addTimeToCalendar(this);
                        });
                    }

                });


            }
            
          
			
            function getTime() {
                var now = new Date();
                var hrs = now.getHours();
                if(hrs < 10)
                    hrs =  "0" + hrs;
                var mins = now.getMinutes();
                if(mins < 10)
                    mins = "0" + mins;
                var timeNow = hrs + ":" + mins;
                return timeNow;
            }
			
            //add a diper
            function addDiaper() {
                $("tr.edit").slideUp();
                $.ajax({
                    url: 'kid_actions.php',
                    type: "POST",
                    data: {kidId: selectedKid, dType: 1, dTimestamp: $("#dipertime").attr("value"), action: "addDiaper"},
                    dataType: "xml",
                    success: function(data) {
                        //$('.result').html(data);
						
                        if($(data).find("result").attr("status") == "error"){
                            $(".errormsg").html($(data).find("error").attr("descr"));
                        }
                        else if($(data).find("result").attr("status") == "ok"){
                            //handle success
                            var time = $(data).find("diapers").attr("time");
                            $("<li>"+time+"</li>").appendTo("#diperstoday > ul");
                        }
                    }
                });
            }
			
            function addDrink() {
                $("tr.edit").slideUp();
                $.ajax({
                    url: 'kid_actions.php',
                    type: "POST",
                    data: {kidId: selectedKid, lTimestamp: $("#drinktime").attr("value"), lAmount: $("#drinkamount").attr("value"), lType: $("#drinktype").attr("value"), action: "addDrink"},
                    dataType: "xml",
                    success: function(data) {
                        //$('.result').html(data);
                        if($(data).find("result").attr("status") == "error"){
                            $(".errormsg").html($(data).find("error").attr("descr"));
                        }
                        else if($(data).find("result").attr("status") == "ok"){
                            //handle success
                            var time = $(data).find("drink").attr("time");
                            var type = $(data).find("drink").attr("drinkTypeString");
                            var amount = $(data).find("drink").attr("amount");
                            $("<li>"+time + "[" + type + " - " + amount + "cc] </li>").appendTo("#drinktoday > ul");
                        }
                    }
                });
            }
			
            function addFood() {
                $("tr.edit").slideUp();
                $.ajax({
                    url: 'kid_actions.php',
                    type: "POST",
                    data: {kidId: selectedKid, fTimestamp: $("#foodtime").attr("value"), fMenu: $("#foodmenu").attr("value"), fScore: $("#foodscore").attr("value"), action: "addFood"},
                    dataType: "xml",
                    success: function(data) {
                        //$('.result').html(data);
						
                        if($(data).find("result").attr("status") == "error"){
                            $(".errormsg").html($(data).find("error").attr("descr"));
                        }
                        else if($(data).find("result").attr("status") == "ok"){
                            //handle success
                            var time = $(data).find("food").attr("time");
                            var menu = $(data).find("food").attr("recipeString");
                            var score = $(data).find("food").attr("score");
                            $("<li>" + time + "[" + menu + " - " + score + "] </li>").appendTo("#foodtoday > ul");
                        }
                    }
                });
            }
			
            function addSleep() {
                $("tr.edit").slideUp();
                $.ajax({
                    url: 'kid_actions.php',
                    type: "POST",
                    data: {kidId: selectedKid, sTimestamp: $("#sleeptime").attr("value"), action: "addSleep"},
                    dataType: "xml",
                    success: function(data) {
                        //$('.result').html(data);
					    if($(data).find("result").attr("status") == "error"){
                            $(".errormsg").html($(data).find("error").attr("descr"));
                        }
                        else if($(data).find("result").attr("status") == "ok"){
                            //handle success
                            var timeFrom = $(data).find("sleep").attr("timeFrom");
                            var timeTo = $(data).find("sleep").attr("timeTo");
                            var begin = $(data).find("sleep").attr("begin");
                            if(begin == "yes"){
                                $("<li><span class=\"from\">"+ timeFrom + "</span> --&gt; <span class=\"to\">"+"..."+"</span></li>").appendTo("#sleeptoday > ul");
                            } else {
                                $("#sleeptoday > ul > li > span.to").each(function () {
                                    if($(this).text() == "..."){
                                        $(this).text(timeTo);
										
                                    }
                                });
                            }
                        }
                    }
                });
            }
            
             function saveNote() {
             
                $.ajax({
                    url: 'kid_actions.php',
                    type: "POST",
                    data: {kidId: selectedKid, notedata: editor.html(), action: "saveNote"},
                    dataType: "xml",
                    success: function(data) {
                        //$('.result').html(data);
						if($(data).find("result").attr("status") == "error"){
                            $(".errormsg").html($(data).find("error").attr("descr"));
                        }
                        else if($(data).find("result").attr("status") == "ok"){
                            //handle success
                        
                        }
                    }
                });
            }
            
            
            function addTimeToCalendar(obj) {
               
                $.ajax({
                    url: 'calendar_actions.php',
                    type: "POST",
                    data: {kidId: selectedKid, cDate: $(obj).attr("id").substring(2),  cStartTime: $("#fromTime").attr("value"), cEndTime: $("#toTime").attr("value"), action: "addTime"},
                    dataType: "xml",
                    success: function(data) {
                        //$('.result').html(data);
                        if($(data).find("result").attr("status") == "error"){
                            $(".errormsg").html($(data).find("error").attr("descr"));
                        }
                        else if($(data).find("result").attr("status") == "ok"){
                            //handle success
                            var date = $(data).find("calendar").attr("date");
                            $("#c_"+date).attr("class", "registered");
                            
                            loadCalendarNextWeek(selectedKid);
                        }
                    }
                });
            }
			
        </script>
        <style type="text/css" media="all">
            @import url("/ukkepuk/source/html/css/topmenu.css");
            @import url("/ukkepuk/source/html/css/ukkepukmain.css");
            @import url("/ukkepuk/source/html/css/monthcalendar.css");
            @import url("/ukkepuk/source/html/css/weekcalendar.css");
            @import url("/ukkepuk/source/html/css/calendarkids.css");
            @import url("/ukkepuk/source/html/css/jquery.ptTimeSelect.css");
            @import url("/ukkepuk/source/html/css/ui.core.css");
            @import url("/ukkepuk/source/html/css/ui.theme.css");
        </style>
        
        <style>
            table.portal {
                width: 100%;
                border: 1px solid #CCC;
            }
            
            td.col1, td.col2, td.col3 {
                border: 1px solid #CCC;
                width: 33%;
                vertical-align: top;
            }
            
            .portalKidInfo {
                display: none;
            }
            
            .portalMainInfo td{
                vertical-align: top;
            }
        </style>
        
       
        <style>
            tr.edit {
                display: none;
            }
            
            .kidthumb {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <?php require_once($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/panels/topmenu.php'); ?>
            
            <div class="content">
                <?php include($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/panels/KidsTileList.php'); ?>
            </div>
            
            <table class="portalMainInfo">
                <tr>
                    <td>
                         <?php include($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/panels/CalendarKidsForCurrentMonth.php'); ?>
                    </td>
                    <td>
                         <?php include($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/panels/CalendarKidsForToday.php'); ?>
                    </td>
                </tr>
            </table>
            
            <table class="portalKidInfo">
                <tr>
                    <td colspan="3">
                        <span id="firstname"/></span>
                        <span id="name"/></span>
                        <span id="kiddate"/></span>
                        </hr>
                    </td>
                </tr>
                <tr>
                    <td class="col1">
                        <table>
                             <tr class="dipers">
                                    <td id="dipersimage"><img src="/ukkepuk/webcontent/images/diaper.jpg" class="edit" height="96px"/></td>
                                    <td id="diperstoday"><ul></ul></td>
                                </tr>
                                <tr class="dipers edit">
                                    <td colspan="2">
                                        <input class="time" type="test"  id="dipertime" name="dipertime"/>
                                        <input type="radio" name="dipergroup" value="pipi"/>
                                        <input type="radio" name="dipergroup" value="kaka"/> 
                                        <img src="/ukkepuk/webcontent/images/add.png" height="32px" id="addDiper" onClick="addDiaper()"/>
                                    </td>
                                </tr>
                        </table>
                        <table>
                             <tr class="sleep">
                                    <td id="sleepimage"><img src="/ukkepuk/webcontent/images/sleep.png" class="edit" height="96px" /></td>
                                    <td id="sleeptoday"><ul></ul></td>
                                </tr>
                                <tr class="sleep edit">
                                    <td colspan="2">
                                        <span id="sleeptimetype">Begin/Einde: </span>
                                        <input class="time" type="text" id="sleeptime" name="sleeptime"/>
                                        <img src="/ukkepuk/webcontent/images/add.png" height="32px" id="addDiper" onClick="addSleep()"/>
                                    </td>
                                </tr>
                        </table>
                    </td>
                    <td class="col2">
                         <table>
                            <tr class="drink">
                                    <td id="drinkimage"><img src="/ukkepuk/webcontent/images/liquid.png" class="edit" height="96px"/></td>
                                    <td id="drinktoday"><ul></ul></td>
                                </tr>
                                <tr class="drink edit">
                                    <td colspan="2">
                                        <input class="time" type="text" id="drinktime" name="drinktime"/>
                                        <input type="text" name="drinkamount" id="drinkamount" value="100"/> cc
                                        <?php Lov::getSelectionHtml(Lov::getDrinkTypes(), "drinktype", "id", "type"); ?>

                                        <!--select name="liquidtype" id="liquidtype"> <option value="1">Melk</option><option value="2">Water</option><option value="3">Thee</option></select-->
                                        <img src="/ukkepuk/webcontent/images/add.png" height="32px" id="addDiper" onClick="addDrink()"/>
                                    </td>
                                </tr>
                            
                        </table>
                        <table>
                                <tr class="food">
                                    <td id="foodimage"><img src="/ukkepuk/webcontent/images/food.png" class="edit" height="96px"/></td>
                                    <td id="foodtoday"><ul></ul></td>
                                </tr>
                                <tr class="food edit">
                                    <td colspan="2">
                                        <input class="time" type="text" id="foodtime" name="foodtime"/>
                                        <?php Lov::getSelectionHtml(Lov::getRecipies(), "foodmenu", "id", "title"); ?>
                                        <!--select name="foodmenu" id="foodmenu"> <option value="daymenu">Dagmenu</option><option value="fruit">Fruitpap</option></select-->
                                        <select name="foodscore" id="foodscore"> <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>
                                        <img src="/ukkepuk/webcontent/images/add.png" height="32px" id="addDiper" onClick="addFood()"/>
                                    </td>
                                </tr>
                        </table>
                    </td>
                    <td class="col3" rowspan="2">
                        <div id="calendarKid">
                            <table>
                                <tr>
                                    <td colspan="2" id="calendar">
                                        
                                    </td>
                                    <td>
                                        <div id="selectedTime"> Beweeg over een dag om de uren te zien.</div>
                                        <span class="label">Tijd aankomst/vertrek: </span>
                                        <input type="text" name="fromTime" class="time" id="fromTime" size="3"/>
                                        <span class="label"> tot </span><input class="time" type="text" name="toTime" id="toTime" size="3"/>
                                       
                                    </td>

                                </tr>
                            </table>
                        </div>
                        <div id="weekcalendar"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"> 
                        <form>
                            <textarea id="editor_note" name="content" style="width:600px;height:200px;"></textarea>
                            <img src="/ukkepuk/webcontent/images/add.png" height="32px"  onClick="saveNote()"/>
                        </form>
                    </td>
                </tr>
            </table>
            
         </div>
    </body>
</html>